/**
 * 页面布局辅助类
 */
.w100 {
	width: 100%;
}

.h100 {
	height: 100%;
}

.min-h-100 {
  min-height: 100vh;
}

.overflow {
	overflow: hidden;
}

.none {
  display: none !important;
}
.inline {
  display: inline !important;
}
.inline-block {
  display: inline-block !important;
}
.block {
  display: block !important;
}

.flex {
	display: flex;
}

.flex-1 {
	flex: 1;
}

.flex-2 {
	flex: 2;
}

.flex-3 {
	flex: 3;
}

.flex-col {
	flex-direction: column;
}

.flex-row {
	flex-direction: row;
}

.flex-wrap {
	flex-wrap: wrap;
}

.white-norwap {
	white-space: nowrap;
}

.white-nowrap {
	white-space: nowrap;
}

.flexA {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

/**
 * 使用示例：text-center
 */
.text {
	@each $class, $value in (left: left, center: center, right: right) {
		&-#{$class} {
			text-align: $value !important;
		}
	}
}

/**
 * 使用示例：basic-xs
 */
.basis {
  @each $class, $value in (xs: 20%, sm: 40%, df: 50%, lg: 60%, xl: 80%) {
    &-#{$class} {
      flex-basis: $value !important;
    }
  }
}

/**
 * 使用示例：align-center
 */
.align {
  @each $class,
    $value
      in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline)
  {
    &-#{$class} {
      align-items: $value !important;
    }
  }
}

/**
 * 使用示例：justify-center
 */
.justify {
  @each $class,
    $value
      in (
        start: flex-start,
        end: flex-end,
        center: center,
        between: space-between,
        around: space-around
      )
  {
    &-#{$class} {
      justify-content: $value !important;
    }
  }
}

/**
 * 使用示例：self-start
 */
.self {
  @each $class,
    $value
      in (start: flex-start, end: flex-end, center: center, stretch: stretch, baseline: baseline)
  {
    &-#{$class} {
      align-self: $value !important;
    }
  }
}


// 固定定位
.fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

.pos-rel{
	position: relative;
}

.pos-m{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background:rgba(0,0,0,0.4);
	z-index: 999;
}

